<div class="layui-card">
	<div class="layui-card-header">
		<h2 class="header-title">员工管理</h2>
		<span class="layui-breadcrumb pull-right">
          <a href="#!console">首页</a>
          <a><cite>员工管理</cite></a>
        </span>
	</div>
	<div class="layui-card-body">
		<div class="layui-form toolbar">
			搜索：
			<select id="user-search-key">
				<option value="">-请选择-</option>
				<option value="user_id">ID</option>
				<option value="username">账号</option>
				<option value="nick_name">用户名</option>
				<option value="phone">手机号</option>
			</select>&emsp;
			<input id="user-search-value" class="layui-input search-input" type="text" placeholder="输入关键字" />&emsp;
			<button id="user-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
			<button id="user-btn-add" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
		</div>

		<table class="layui-table" id="user-table" lay-filter="user-table"></table>
	</div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="user-table-bar">
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 表格状态列 -->
<script type="text/html" id="user-tpl-state">
	<input type="checkbox" lay-filter="user-tpl-state" value="{{d.userId}}" lay-skin="switch" lay-text="正常|锁定" {{d.status==1? 'checked': ''}}/>
</script>

<script>
	layui.use(['form', 'table', 'util', 'config', 'admin'], function() {
		var form = layui.form;
		var table = layui.table;
		var config = layui.config;
		var layer = layui.layer;
		var util = layui.util;
		var admin = layui.admin;

		sUser()

		function sUser() {
			$.ajax({
				type: "POST",
				url: path + '/sys/user/list1',
				data: {

					sortOrder: "asc",
					pageSize: 1000,
					pageNumber: 1,
					username: ''

				},
				dataType: "json",
				xhrFields: {
					withCredentials: true
				},
				beforeSend: function(request) {},
				success: function(data) {
					// 渲染表格
					table.render({
						elem: '#user-table',
						data: data.rows,
						where: {
							access_token: config.getToken().access_token
						},
						page: true,
						cols: [
							[{
									field: 'userId',
									title: '编号'
								},
								{
									field: 'username',
									title: '用户名'
								},
								{
									field: 'orgName',
									title: '所属机构'
								},
								{
									field: 'roleName',
									title: '角色名称'
								},
								{
									field: 'status',
									templet: '#user-tpl-state',
									title: '状态'
								},

								{
									field: 'gmtCreate',
									templet: function(d) {
										return util.toDateString(d.gmtCreate);
									},
									title: '创建时间'
								},
								{
									align: 'center',
									toolbar: '#user-table-bar',
									title: '操作'
								}
							]
						]
					});
				},
				beforeSend: function() {},
				complete: function() {},

				error: function(result) {
					console.log(result);
				},
			})
		}

		// 添加按钮点击事件
		$('#user-btn-add').click(function() {
			showEditModel();
		});

		// 工具条点击事件
		table.on('tool(user-table)', function(obj) {
			var data = obj.data;
			var layEvent = obj.event;

			if(layEvent === 'edit') { // 修改
				showEditModel(data);
			} else if(layEvent === 'del') { // 重置密码
				layer.confirm('确定要删除吗？', function(i) {
					layer.close(i);
					layer.load(2);

					var x = []

					$.ajax({
						type: "POST",
						url: userDelete,
						data: {
							id: obj.data.userId
						},
						dataType: "json",
						xhrFields: {
							withCredentials: true
						},
						success: function(data) {
							console.log(data);
							if(data.code == 0) {
								layer.msg(data.msg, {
									icon: 1
								});
								layer.closeAll();
								sUser()
							} else {
								layer.msg(data.msg, {
									icon: 2
								});
							}
						},
						error: function(result) {
							console.log(result);
						},
					});
				});
			}
		});

		//显示表单弹窗
		var showEditModel = function(data) {
			console.log(data)
			admin.putTempData('t_user', data);
			var title = data ? '修改用户' : '添加用户';
			admin.popupCenter({
				title: title,
				path: 'components/wz/user_form.html',
				skin: 'zbyhhh',
				finish: function() {
					alert(1)
				}
			});
		};

		// 搜索按钮点击事件
		$('#user-btn-search').click(function() {
			var key = $('#user-search-key').val();
			var value = $('#user-search-value').val();
			table.reload('user-table', {
				where: {
					searchKey: key,
					searchValue: value
				}
			});
		});

		// 修改user状态
		form.on('switch(user-tpl-state)', function(obj) {
			layer.load(2);
			admin.req('user_state.json', {
				userId: obj.elem.value,
				state: obj.elem.checked ? 0 : 1
			}, function(data) {
				layer.closeAll('loading');
				if(data.code == 200) {
					layer.msg(data.msg, {
						icon: 1
					});
					//table.reload('table-user', {});
				} else {
					layer.msg(data.msg, {
						icon: 2
					});
					$(obj.elem).prop('checked', !obj.elem.checked);
					form.render('checkbox');
				}
			}, 'GET');
		});
	});
</script>